/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode2.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import icon_banner2_mode1 from "@/assets/icon_banner2_mode1@2x.png"
import icon_banner2_mode2 from "@/assets/icon_banner2_mode2@2x.png"
import icon_banner2_mode3 from "@/assets/icon_banner2_mode3@2x.png"
import icon_banner2_mode4 from "@/assets/icon_banner2_mode3@2x.png"
import icon_logo1 from "@/assets/icon_logo1@2x.png"
import icon_about_arrow from '@/assets/icon_about_arrow@2x.png'

import { PageIndicator, Swiper } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import NavigateBar from "@/components/NavigateBar";

/**
 * 落地页-1
 */
export default function LaunchMode1() {

    // 获取路由历史 history 对象
    const history = useHistory()

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const banners = [icon_banner2_mode2, icon_banner2_mode3, icon_banner2_mode4, icon_banner2_mode1,]
    // const banners = [icon_banner2_mode2, icon_banner2_mode3]

    // const items = banners.map((banner, index) => (
    //     <Swiper.Item key={index}>
    //         <div className="launchmode2SwiperItemContent">
    //             <img className="launchmode2SwiperItemImage" src={banner} alt="" />
    //         </div>
    //     </Swiper.Item>
    // ))

    const items = banners.map((banner, index) => (
        // <Swiper.Item key={index}>
        // <div className="launchmode2SwiperItemContent" key={index}>
        //     <img className="launchmode2SwiperItemImage" src={banner} alt="" />
        // </div>
        // </Swiper.Item>


        <img className="launchmode2SwiperItemImageSelf" src={banner} alt="" key={index} />
    ))

    //点击下载
    const onHandleInstallClick = () => {
        const pUrl = ""
        window.open(pUrl, "_blank")
    }

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //启动时请求用户状态
    useEffect(() => {
        //打点
        doHitEvent("launchmode2_START")

        return () => {
            //打点
            doHitEvent("launchmode2_END")
        }
    }, [])

    return (
        <div className="launchmode2Root">
            <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar>

            {/* app 图标 */}
            <div className="launchmode2RowGlobalPadding">
                <img className="launchmode2AppLogo" src={icon_logo1} alt="" />

                <div className="launchmode2ColumnFullRight launchmode2PaddingLeft16Px">
                    <span className="launchmode2AppName">Fléche cash-app prêt sécurisé</span>
                    <span className="launchmode2AppOwner launchmode2MarginTop5Px">CASH ARROW DEV</span>
                </div>
            </div>

            {/* 评价、下载量 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop32Px launchmode2FlexCenter">
                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">4.6</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">2640 reviews</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreText">100K+</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">Downloads</div>
                </div>

                {/* <div className="launchmode2Space22Px"></div> */}

                <div className="launchmode2ColumnStoreItem">
                    <div className="launchmode2StoreTextAgeLimit">18+</div>
                    <div className="launchmode2StoreTips launchmode2MarginTop5Px">Rated for 3+</div>
                </div>
            </div>

            {/* 跳转应用市场 */}
            <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                <div className="launchmode2BtnInstall" onClick={onHandleInstallClick}>
                    <div className="launchmode2InstallText">Install on Play Store</div>
                </div>
            </div>

            {/* banner */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop75Px">
                <div className="launchmode2SwiperContent">
                    {/* <Swiper
                        indicator={() => null}
                        defaultIndex={0}>
                        {items}
                    </Swiper> */}
                    {items}
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop17Px">
                <div className="launchmode2StepTitle">About this app</div>
                <img className="launchmode2StepIcon" src={icon_about_arrow} alt="" onClick={onHandleInstallClick} />
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop10Px">
                <div className="launchmode2StepText">
                    -Caractéristiques du produit--<br></br>
                    Faible taux d'intérêt: taux d'intérêt global annualisé (intérêt simple) aussi bas que 8,99%<br></br>
                    Taux d'intérêt le plus élevé: taux d'intérêt global annualisé de 24,2%<br></br>
                    Durée du prêt : jusqu'à 360 jours<br></br>
                    Durée minimale du prêt : à partir de 91 jours<br></br>
                    Montant élevé: la limite supérieure du montant peut atteindre 600,000 (sous réserve d'approbation réelle)<br></br>
                    Montant minimal du prêt:20000 FCFA;<br></br>

                    Grâce à l'exemple suivant pour vous aider à calculer les taux d'intérêt.<br></br>
                    Si vous choisissez un principal de prêt de 180 jours de 100 000, nous afficherons les détails suivants<br></br>
                    Durée du prêt : 180 jours.<br></br>
                    Montant du prêt : 100 000.<br></br>
                    Montant du prêt décaissé : 100 000.<br></br>
                    PMT (montant du paiement mensuel) : 112 100.<br></br>
                    PMT = 100 000 x 24,2 %/360*180 = 112 100<br></br>
                    Taux d'intérêt total: 12100.<br></br>
                    Montant principal : 100 000.<br></br>
                    Montant total = capital + taux d'intérêt total = 112100<br></br>
                    Taux d'intérêt global : 24,2%.<br></br><br></br>

                    Cash arrow, utilisant l'intelligence artificielle et la technologie de contrôle des risques du Big Data, fournit aux utilisateurs des services de crédit financier pratiques, rapides et sûrs.<br></br><br></br>

                    Vitesse rapide: le système approuve automatiquement et le délai de décaissement le plus rapide est de 1minute<br></br>
                    Plus pratique : demande en ligne de prêt de téléphone portable sans hypothèque<br></br>
                    Plusieurs options de versement: les versements 3/6/12 sont flexibles et facultatifs<br></br>
                </div>
            </div>

            {/* 申请步骤 */}
            <div className="launchmode2ColumnGlobalPadding launchmode2MarginTop14Px">
                <div className="launchmode2StepTitle launchmode2FontSize14px">Updated on</div>
                <div className="launchmode2StepText launchmode2FontColorUpdate launchmode2MarginTop5Px">13 Jun 2023</div>
            </div>

            {/* 标签 */}
            <div className="launchmode2RowGlobalPadding launchmode2MarginTop28Px">
                <div className="launchmode2CateTag">#8 top free finance</div>
                <div className="launchmode2Space11Px"></div>
                <div className="launchmode2CateTag">Finance</div>
            </div>

            {/* 底部标签 */}
            <div className="launchmode2Space11Px launchmode2MarginTop42Px"></div>

        </div>
    )
}